import * as React from 'react'
import { useHistory } from 'react-router-dom'
import { ISku } from '../../types'

import style from './style.module.css'
import Nav from '../../components/Nav'
import Checkbox from '../../components/Checkbox'
import ShopCarItem from '../../components/ShopCartItem'
import * as api from '../../services/api'
import Disabled from './bot'
import { useCallback } from 'react'

function ShopCar() {
    //列表项的选中状态
    const [isCheck, setcheck] = React.useState<boolean[]>([])
    //全选状态
    const [isAllCheck, setall] = React.useState<boolean>(false)
    //列表项
    const [carlist, setlist] = React.useState<ISku[]>([])
    const history = useHistory()
    
    const getData = useCallback(async () => {
        let result = await api.listCart()
        let checked: boolean[] = []
        if (result.stat === 'OK') {
            result.rows.map(() => (
                checked.push(false)
            ))
            setcheck(checked)
            setlist(result.rows)
        } else {
            history.push('/login')
        }
    }, [history])

    React.useEffect(() => {
        getData()
    }, [getData])
    //删除
    const doRemove = async () => {
        let ids: string[] = []
        isCheck.map((v, w) => {
            if (v === true) {
                ids.push(carlist[w].id!)
            }
            return v
        })
        await api.removeCart(ids)
        let result = await api.listCart()
        setlist(result.rows)
        getData()
    }
    //列表项选中状态
    const doChange = (isChecked: boolean, index: number) => {
        let isAllCheck = true;
        let checklist = isCheck.map((v, w) => {
            if (w === index) v = isChecked
            if (v === false) isAllCheck = false
            return v
        })
        setcheck(checklist)
        setall(isAllCheck)
    }
    //全选选中状态
    const doAllChange = (isAllCheck: boolean) => {
        let isChecked = isCheck.map(() => isAllCheck)
        setcheck(isChecked)
        setall(isAllCheck)
    }
    if (carlist.length === 0) return (
        <div className={style.back}>
            <div className={style.empty}>
                <i className="iconfont icon-shop" />
                <span>购物车是空的</span>
            </div>
            <Nav />
        </div>
    )
    return (
        <div className={style.back}>
            <div className={style.wrapper}>
                <div className={style.carlist}>
                    {carlist.map((item, index) => (
                        <ShopCarItem
                            key={item.id}
                            value={isCheck[index]}
                            sku={item}
                            index={index}
                            onChange={(value, index) => doChange(value, index!)} />
                    ))}
                </div>
            </div>
            <div className={style.control}>
                <Checkbox
                    value={isAllCheck}
                    onChange={(value) => doAllChange(value)} />
                <span>全选</span>
                <Disabled isCheck={isCheck} doRemove={() => doRemove()}></Disabled>
            </div>
            <Nav />
        </div>
    )
}

export default ShopCar